.main-row > * {
    margin: auto;
}

.generator-container {
    text-align: center;
    padding-top: 30px;
}

.progress-text {
    margin-top: 0;
    text-align: center;
}

.about-container {
    margin-top: 20px;
}

.about {
    float: right;
    clear: both;
}

.progress-transition-leave {
    height: 55px;
    opacity: 1;
}


.progress-transition-leave.progress-transition-leave-active {
    height: 0;
    opacity: 0;
    transition: opacity 500ms ease-in-out 200ms, height 500ms ease-in-out 500ms;
}

.progress-transition-enter {
    height: 0;
    opacity: 0;
}

.progress-transition-enter.progress-transition-enter-active {
    height: 55px;
    opacity: 1;
    transition: opacity 100ms ease-in-out, height 100ms ease-in-out;
}

.twitter-timeline-title {
    max-width: 520px;
    margin: 20px auto 10px auto;
    text-align: left;
}

@media not screen and (min-width: 1200px) {
    .main-row {
        margin: 0;
    }

    .twitter-timeline-row {
        margin-top: 20px;
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
    .generator-container {
        position: sticky;
        top: 100px;
    }

    .options-container {
        min-height: 392px;
        border-left: 1px solid #ddd;
        padding-left: 25px;
    }
}

@media not screen and (min-width: 768px) {
    .main-row {
        margin: 0 -15px;
    }

    .generator-container {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .options-container {
        border-top: 1px solid #ddd;
    }
}